<!--
 * @Author: boyyang
 * @Date: 2022-01-16 13:39:40
 * @LastEditTime: 2022-03-18 21:38:07
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\imagesExhibtion\index.vue
-->
<template>
    <div class="image-exhibition" ref="imageExhibiton">
        <images-item-c
            :imgs="imgs"
            :is-mobile="type"
            v-if="imgshowType"
            @reload="getIMG(page)"
            :show-type="hidden_show"
        ></images-item-c>
        <images-item :imgs="imgs" :is-mobile="type" v-else></images-item>

        <div class="empty" v-if="imgs?.length == 0">
            <img src="@/assets/cry.png" />
            <div class="empty-text">暂无更多数据!</div>
        </div>

        <div class="next-page">
            <div class="btn-left btn" @click="exit">
                <i class="iconfont icon-custom311"></i>
            </div>
            <div :class="['btn', { 'btn-active': type }]" @click="typeChange(true)">
                <i class="iconfont icon-shoujitianchong"></i>
            </div>
            <div :class="['btn', { 'btn-active': !type }]" @click="typeChange(false)">
                <i class="iconfont icon-bg-pc"></i>
            </div>
            <div :class="['btn-ceter', 'btn', { 'btn-disable': page == 0 }]" @click="nextPage(0)">
                <i class="iconfont icon-icon-prev"></i>
            </div>
            <div :class="['btn-right', 'btn', { 'btn-disable': isLastPage }]" @click="nextPage(1)">
                <i class="iconfont icon-zuoyoujiantou-copy-copy-copy1"></i>
            </div>
        </div>
        <div class="change-imgshow-type">
            <i class="iconfont icon-qiehuan" @click="changeImgshowType"></i>
        </div>
        <div class="change-imgshow-order">
            <y-switch
                v-model:status="sort_status"
                true-label="按照点赞数量排序"
                false-label="按照上传时间排序"
                false-label-color="#3d3b4f"
            ></y-switch>
            <y-switch
                v-model:status="hidden_show"
                true-label="查看隐藏图片"
                false-label="查看公开图片"
                false-label-color="#3d3b4f"
            ></y-switch>
        </div>
    </div>
</template>

<script lang="ts" setup>
import imagesItem from './components/imagesItem.vue'
import imagesItemC from './components/imagesItemC.vue'
import { getImgs, userMes } from '@/cloudbase'
import { useRouter } from 'vue-router'
import { useLoading } from '@/components/fullScreenLoading'

const router = useRouter()
const loading = useLoading()

const userInfo = userMes()

const imageExhibiton = ref<any>(null)
const imgs = ref<any[]>([])
const page = ref<number>(0)
const type = ref<boolean>(true)
const isLastPage = ref<boolean>(false)
const imgshowType = ref<boolean>(false)
const sort_status = ref<boolean>(true)
const hidden_show = ref<boolean>(true)

const changeTimer = ref<any>(null)

onMounted(() => {
    getIMG(page.value)

    let W = imageExhibiton.value.offsetWidth

    if (W <= 800) {
        imgshowType.value = true
    } else {
        imgshowType.value = false
    }

    window.onresize = () => {
        let _W = imageExhibiton.value.offsetWidth

        if (_W <= 800) {
            imgshowType.value = true
        } else {
            imgshowType.value = false
        }
    }
})

onUnmounted(() => {
    window.onresize = null
})

watch([() => sort_status.value, () => hidden_show.value], ([n_sort_status, n_hidden_show], [o_sort_status, o_hidden_show]) => {
    page.value = 0
    changeTimer.value && clearTimeout(changeTimer.value)
    changeTimer.value = setTimeout(() => {
        getIMG(page.value)
    }, 500)

})

const typeChange = (imgType: boolean) => {
    type.value = imgType
    page.value = 0

    getIMG(page.value)
}

const changeImgshowType = () => {
    imgshowType.value = !imgshowType.value
}

const nextPage = (type: number) => {

    if (type === 0 && page.value === 0) {
        return
    }

    if (type === 1 && isLastPage.value === true) {
        return
    }

    if (type === 0) {
        page.value--
    } else {
        page.value++
    }

    getIMG(page.value)
}

const exit = () => {
    router.push({
        name: 'Home'
    })
}

const getIMG = (page: number) => {
    loading.start()

    let imgType = type.value ? 'wallpaper_mobile' : 'wallpaper_pc'
    let sort = sort_status.value ? { key: 'create_time', type: 'desc' } : { key: 'thumb', type: 'desc' }
    let query = hidden_show.value ? { isShow: true } : { isShow: false, uid: userInfo?.uid }
    getImgs(imgType, page, 6, sort, query).then((res) => {
        if (res.data.length < 6) {
            isLastPage.value = true
        } else {
            isLastPage.value = false
        }
        imgs.value = res.data

        loading.end()
    })
}

</script>

<style scoped lang="scss">
.image-exhibition {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    .empty {
        width: 100%;
        height: 100%;
        position: absolute;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .empty-text {
            color: whitesmoke;
            font-size: 13px;
            margin-top: 20px;
        }

        img {
            width: 8%;
        }
    }
}

.next-page {
    position: absolute;
    bottom: 25px;
    width: 350px;
    height: 50px;

    box-shadow: 3px 4px 2px 2px rgba(0, 0, 0, 0.5);

    border-radius: 4px;
    overflow: hidden;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    background-color: #fff;

    z-index: 15;
}

.btn {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 15px;

    cursor: pointer;

    &:hover {
        background-color: rgb(16, 167, 146);
        color: whitesmoke;
    }
}

.btn-active {
    background-color: #ff4777;
    color: whitesmoke;
}

.btn-disable {
    cursor: not-allowed;
}

.change-imgshow-type {
    position: absolute;
    top: 50px;
    right: 35px;
    color: whitesmoke;
    i {
        font-size: 25px;
        cursor: pointer;
    }

    animation: iconTrans 0.5s linear infinite;

    @keyframes iconTrans {
        0% {
            transform: rotateZ(0deg);
            color: pink;
        }

        100% {
            transform: rotateZ(360deg);
            color: rgb(182, 28, 54);
        }
    }
}

.change-imgshow-order {
    position: absolute;
    top: 50px;
    left: 35px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
}

@media screen and (max-width: 800px) {
    .change-imgshow-type {
        display: none;
    }

    .change-imgshow-order {
        z-index: 999;
        left: auto;
        // right: 25px;
        top: 20px;
    }
}
</style>
